<script setup>
import { ref, toRefs } from 'vue';
import { InboxOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import HDK from '@/lib/HDK.js';

const props = defineProps({
    dialogTitle: {
        type: String,
        default: '导入数据'
    },
    loading: {
        type: Boolean,
        default: false
    }
});

const emits = defineEmits(['upload']);
const { dialogTitle, loading } = toRefs(props);
const visible = ref(false);
const uploadFile = ref(null);

function showComponent() {
    visible.value = true;
}

function onUploadFile(obj) {
    const { file } = obj;
    
    const fileType = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
    if (!fileType.includes(file.type)) {
        HDK.info('只允许上传 XLS/XLSX 表格文件！');
        return false;
    }

    uploadFile.value = file;
    return false;
}

function onSubmit() {
    emits('upload', uploadFile.value);
}

defineExpose({showComponent});

</script>

<template>
    <a-modal
        v-model:open="visible"
        :title="dialogTitle"
        centered
        :mask-closable="false"
    >
        <template #footer>
            <a-space>
                <a-button type="primary" :loading="loading">下载导入模板</a-button>
                <a-button type="primary" :loading="loading" @click="onSubmit">导入数据</a-button>
            </a-space>
        </template>

        <a-upload-dragger
            :fileList="[]"
            :multiple="false"
            accept=".xls,.xlsx"
            :customRequest="onUploadFile"
        >
            <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">点击此处或将文件拖动到此处上传</p>
            <p class="ant-upload-hint">只允许上传 XLSX/XLS 文件</p>
        </a-upload-dragger>
        <a-list v-if="uploadFile != null" bordered style="margin-top: 14px;">
            <a-list-item>
                <div class="file-item">
                    {{ uploadFile.name }}
                    <CloseCircleOutlined @click="uploadFile = null" />
                </div>
            </a-list-item>
        </a-list>
        <a-alert
            message="提示"
            type="info"
            style="margin-top: 14px;"
        >
            <template #description>
                <div> 1、请下载模板后按照模板的格式修改模板数据后导入。</div>
                <div>2、请不要修改表格的表头信息！</div>
                <div> 3、请不要进行任何修改表格样式的操作，如：合并单元格！</div>
            </template>
        </a-alert>
    </a-modal>
</template>

<style lang="less" scoped>
.file-item {
    display: flex;align-items: center;justify-content: space-between;width: 100%;
}
</style>